<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="80px" size="mini">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button icon="el-icon-plus" plain size="mini" type="primary" @click="handleAddAssets">选择资产</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-descriptions :column="6" border direction="vertical">
            <el-descriptions-item label="项目区域">
              <dict-tag :options="dict.type.cld_project_region"
                        :value="form.projectRegion"/>
            </el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ form.projectName }}</el-descriptions-item>
            <el-descriptions-item label="资产名称">{{ form.assetsName }}</el-descriptions-item>
            <el-descriptions-item label="资产类型">
              <dict-tag :options="dict.type.cld_assets_type"
                        :value="form.assetsType"/>
            </el-descriptions-item>
            <el-descriptions-item label="资产型号">{{ form.assetsModel }}</el-descriptions-item>
            <el-descriptions-item label="设备ID">{{ form.assetsIdCard }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="8">
          <el-form-item label="报修描述" prop="reportDesc">
            <el-input v-model="form.reportDesc" :rows="4" placeholder="请输入" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相关图片" prop="reportImgs">
            <image-upload v-model="form.reportImgs" :isShowTip="false"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-divider content-position="left">维修信息</el-divider>
          <el-row :gutter="10">
            <el-col :span="4">
              <el-form-item label="维修人" prop="repairUserName">
                <el-input v-model="form.repairUserName" :disabled="true" placeholder="请选择">
                  <el-button slot="append" icon="el-icon-search" @click="handleAddUser">选择</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="损坏状态" prop="repairStatus">
                <el-select v-model="form.repairStatus" filterable placeholder="请选择">
                  <el-option v-for="dict in repairStatusOptions" :key="dict.value" :label="dict.label"
                             :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="其他金额" prop="repairMoney">
                <el-input v-model="form.repairMoney" placeholder="请输入" type="number"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button icon="el-icon-plus" plain size="mini" type="primary" @click="handleAddCommodity">添加配件
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="el-icon-plus" plain size="mini" type="primary" :disabled="!form.assetsRecordId" @click="handleAddProjectCommodity">添加物资
          </el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-table :data="form.detailsList">
            <el-table-column align="center" label="商品编号" prop="commodityNo"/>
            <el-table-column align="center" label="商品名称" prop="commodityName1"/>
            <el-table-column align="center" label="数量" prop="assetsRepairNumber" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.assetsRepairNumber" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单位" prop="unitName1" width="100"/>
            <el-table-column align="center" label="规格" prop="commoditySpec" width="100"/>
            <el-table-column align="center" label="价格" prop="costPrice" width="100">
              <template slot-scope="scope">
                {{ toMoney(scope.row.costPrice) }}
              </template>
            </el-table-column>
            <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleDeleteCommodity(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="8">
          <el-form-item label="维修描述" prop="repairDesc">
            <el-input v-model="form.repairDesc" :rows="4" placeholder="请输入" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="相关图片" prop="repairImgs">
            <image-upload v-model="form.repairImgs" :isShowTip="false"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer-options">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

    <!-- 选择商品 -->
    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isCommodityOpen" append-to-body title="选择商品"
               width="80%">
      <ErpCommodity v-if="isCommodityOpen" :notCommodityIds="notCommodityIds" :wareId="wareId"
                    @SelectionChange="handleSelectionChange">
      </ErpCommodity>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSelectedCommdity">确 定</el-button>
        <el-button @click="isCommodityOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择维修人 -->
    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isUserOpen" append-to-body title="选择维修人"
               width="60%">
      <selectedUser v-if="isUserOpen" @childInput="handleUserChange">
      </selectedUser>
    </el-dialog>

    <!-- 选择资产 -->
    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" :visible.sync="isAssetsOpen" append-to-body title="选择资产"
               width="60%">
      <selected-assets v-if="isAssetsOpen" recordStatusArr="1,2" @change="handleAssetsChange">
      </selected-assets>
    </el-dialog>
  </div>
</template>

<script>
import {addPlacementRecord, getRepairDetails} from "@/api/cld/record";
import ErpCommodity from '@/views/erp/ErpCommodity/selectedCommodity'
import {repairStatusOptions} from '@/assets/staticDict'
import selectedUser from "../../../system/user/selectedUser.vue";
import selectedAssets from "../selectedAssets.vue";

export default {
  name: "repair",
  dicts: ['cld_assets_type', 'cld_project_region'],
  components: {
    ErpCommodity,
    selectedUser,
    selectedAssets
  },
  data() {
    return {
      // 资产信息
      assetsList: [],
      // 表单
      form: {
        assetsList: [],
        detailsList: []
      },
      // 选择商品
      isCommodityOpen: false,
      // 选择用户
      isUserOpen: false,
      // 选择资产
      isAssetsOpen: false,
      // 损坏状态
      repairStatusOptions: repairStatusOptions,
      rules: {
        reportDesc: [
          {required: true, message: "报修描述不能为空", trigger: "blur"}
        ],
        reportImgs: [
          {required: true, message: "报修相关图片不能为空", trigger: "blur"}
        ],
        repairUserName: [
          {required: true, message: "请选择维修人", trigger: "blur"}
        ],
        repairStatus: [
          {required: true, message: "请选择报损状态", trigger: "change"}
        ],
        repairMoney: [
          {required: true, message: "维修其他金额不能为空", trigger: "blur"}
        ],
        repairDesc: [
          {required: true, message: "维修描述不能为空", trigger: "blur"}
        ],
        repairImgs: [
          {required: true, message: "维修相关图片不能为空", trigger: "blur"}
        ],
      },
      // 选择物资仓库id
      wareId: null
    };
  },
  created() {
    let assetsRecordId = this.$route.params && this.$route.params.assetsRecordId;
    if (assetsRecordId && assetsRecordId != 0) {
      this.handleGetRepairDetails(assetsRecordId);
    }
  },
  methods: {
    /** 查询资产维修明细列表 */
    handleGetRepairDetails(assetsRecordId) {
      getRepairDetails(assetsRecordId).then(response => {
        this.form = response.data;
      });
    },
    // 提交
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.detailsList.length == 0) {
            this.$message.error("请选择维修配件");
            return;
          }
          this.form.recordStatus = 3;
          addPlacementRecord(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.cancel();
          });
        }
      });
    },
    // 选择商品
    handleAddCommodity() {
      // 设置商品过滤id
      this.wareId = 10;
      this.notCommodityIds = this.form.detailsList?.map(item => item.commodityId);
      this.isCommodityOpen = true;
    },
    // 商品选择
    handleSelectionChange(selection) {
      this.temporyList = selection;
    },
    // 确定选择商品
    submitSelectedCommdity() {
      this.temporyList.forEach( i => {
        i.wareId = this.wareId;
        this.form.detailsList.push({
          ...i,
          wareId: this.wareId
        })
      })
      this.isCommodityOpen = false;
    },
    /** 删除商品 */
    handleDeleteCommodity(row) {
      const index = this.form.detailsList.indexOf(row);
      if (index > -1) {
        this.form.detailsList.splice(index, 1);
      }
    },
    // 选择维修人
    handleAddUser() {
      this.isUserOpen = true;
    },
    // 确认选择维修人
    handleUserChange(e) {
      this.form.repairUserId = e.userId;
      this.form.repairUserName = e.nickName;
      this.isUserOpen = false;
    },
    // 选择资产
    handleAddAssets() {
      this.isAssetsOpen = true;
    },
    // 确认选择资产
    handleAssetsChange(e) {
      this.form.assetsRecordId = e.assetsRecordId;
      this.form.projectRegion = e.projectRegion;
      this.form.projectName = e.projectName;
      this.form.assetsName = e.assetsName;
      this.form.assetsType = e.assetsType;
      this.form.assetsModel = e.assetsModel;
      this.form.assetsIdCard = e.assetsIdCard;
      this.form.projectWareId = e.projectWareId;
      this.isAssetsOpen = false;
    },
    // 选择项目物资
    handleAddProjectCommodity(){
      if(this.form.projectWareId){
        this.wareId = this.form.projectWareId;
      }else{
        this.wareId = 6;
      }
       // 设置商品过滤id
      this.notCommodityIds = this.form.detailsList?.map(item => item.commodityId);
      this.isCommodityOpen = true;
    },
    // 取消
    cancel() {
      const obj = {path: "/cloudManage/asset/repair", name: "repair"};
      this.$tab.closeOpenPage(obj);
      this.$tab.refreshPage(obj);
    }
  }
};
</script>
<style scoped>
.el-range-editor.el-input__inner {
  width: 100%;
}

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 110px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;
}
</style>
